<template>
	<view class="lh-container">
		<view class="top_image">
			<image :src="`${constInfo.srcConst}/lhhy/studyKing/top.png`" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<view class="form-container">
			<uni-forms class="forms-item" ref="accountForm" :model="formData">
				<!-- 				<uni-forms-item>
					<input
						style="width: 600rpx"
						maxlength="11"
						placeholder="请输入手机号"
						type="tel"
						v-model="userInfo.info.mobile"
						class="uni-input-input"
						placeholder-style="color: #969696;font-size:40rpx"
					/>
				</uni-forms-item> -->

				<view v-if="userInfo.info.mobile" class="login-btn" style="text-align: center">
					<image :src="`${constInfo.srcConst}/lhhy/studyKing/confirm.png`" mode="widthFix" style="width: 600rpx" @click="submitform"></image>
				</view>
				<view class="login-btn-auth" v-else>
					<button class="sub-btn" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumberConfirm" @error="handleAuthError">
						<image :src="`${constInfo.srcConst}/lhhy/studyKing/confirm.png`" mode="widthFix" style="width: 600rpx"></image>
					</button>
				</view>

				<view style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; justify-content: center; align-items: center">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #ffffff; font-weight: 400; font-size: 24rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(1)">《隐私政策》</text>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(2524)">《产品说明》</text>
				</view>
			</uni-forms>
		</view>

		<view class="bottom_image">
			<image :src="`${constInfo.srcConst}/lhhy/studyKing/bottom.png`" style="width: 750rpx" mode="widthFix"></image>
		</view>
		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>

		<view class="fixed-1" @click="privatePro(2524)">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/rule.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-2" @click="goLink">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/link.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-3" @click="phone">
			<image :src="`${constInfo.srcConst}/lhhy/sh30/phone.png`" style="width: 45rpx" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import perInfoVue from '../../components/per-info/per-info.vue';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds,getPhoneNumber,handleAuthError } from '@/utils/login.js';
import paramApi from '@/apis/paramApi.js';
import { getProductNum } from '@/utils/commo.js';
const { userInfo } = storeToRefs(useUserStore());
const imagePath = ref('https://web.78keji.cn/v2img/jxw/');
const { constInfo } = constStore();
const accountForm = ref();
// 表单数据
const allChecked = ref(false);
const popupOk = ref();

const agree = ref('同意');
const agreeType = ref(1);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: ''
});
const uuIdsInit = uuIds();
const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
// 获取手机号 并下单
const getPhoneNumberConfirm = async () => {
	const res = await getPhoneNumber();
	console.log(res, 'getPhoneNumberConfirm');
	if (res.code == 20000) {
		allChecked.value = true
		submitform();
	}
};
const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};
const goLink = () => {
	// console.log('去哪里');
	uni.navigateTo({
			url: `/pages/my/orderList`
	});
};
watch(
	() => formData.mobile,
	(newVal, oldValue) => {
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
		if (isOkMobile) {
			uni.hideKeyboard();
		}
	}
);

/* 发送订单 */
const submitform = async () => {
	try {
		if (!allChecked.value) return uni.utils.toast('请勾选《隐私协议》');
		if (!userInfo.value.info.mobile) return uni.utils.toast('请输入手机号');

		const arr = {
			productCode: 'LH2524',
			channelCode: '4zw8ad3377b54ea8ba7cda02d2194zw8',
			mobile: userInfo.value.info.mobile,
			orderType: 3,
			paymentMethod: 1,
			uuid:uuIdsInit
		};
		initApi.associateMemberSign(arr).then((res) => {
			console.log(res, 'uuiduuid');
			if (res.code == 20000) {
				handleJumpPaySign(res.data);
			}
		});


	} catch (e) {
		//TODO handle the exception
		console.log(e);
	
		return uni.utils.toast('订单订购失败');
	}
};
const handleJumpPaySign = (query) => {
	console.log(query, 'apply');
	my.ap.openURL({
		url: 'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl, // 请将 url 替换为有效的页面地址
		success: (res) => {
			console.log('openURL success', res);
		},
		fail: (err) => {
			console.log('openURL success', err);
		}
	});
};
onLoad((query) => {
	// 支付宝 默认授权登录
	paramApi.initData(query);
	// #ifdef MP-ALIPAY
	// getPhoneNumber();
	// #endif
	setTimeout(() => {
		getProductNum(paramApi.getA(), 'LH2524', uuIdsInit);
	}, 100);
});

const ok1 = () => {
	popupOk.value.close();
	allChecked.value = true;
};
const privatePro = (type) => {
	agreeType.value = type;
	popupOk.value.open('center');
};
</script>

<style lang="scss" scoped>
.form-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	overflow: hidden;
	box-sizing: border-box;
	.forms-item {
		width: 600rpx;
		margin: 0 auto;
	}
	.login-btn {
		animation: scaleUp 2.5s infinite; /* 动画名称、持续时间、是否无限循环 */
	}
	@keyframes scaleUp {
		0%,
		50% {
			transform: scale(1); /* 开始时的缩放比例 */
		}
		25%,
		75% {
			transform: scale(1.05); /* 缩放比例最大值 */
		}
		100% {
			transform: scale(1); /* 结束时的缩放比例 */
		}
	}
	.uni-forms-item {
		height: 100rpx;
		margin-bottom: 20 !important;
		border-bottom: 2rpx solid #eee;

		/* #ifndef MP-ALIPAY */
		background-color: #ffffff;
		/* #endif */
		border-radius: 100rpx !important;
		box-sizing: border-box;
		.uni-input-input {
			width: 600rpx;
			/* #ifdef MP-ALIPAY */
			height: 100rpx;
			margin-left: 75rpx;
			text-align: center;
			font-size: 34rpx;
			/* #endif */

			/* #ifndef MP-ALIPAY */
			margin-left: 50rpx !important;
			/* #endif */
			font-size: 34rpx;
		}
	}
}
.lh-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	overflow: hidden;
	box-sizing: border-box;
}

:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
.fixed-phone {
	position: absolute;
	top: 300rpx;
	right: 0rpx;
}
.fixed-active {
	position: absolute;
	top: 150rpx;
	right: 0rpx;
}
.fixed-link {
	position: absolute;
	top: 450rpx;
	right: 0rpx;
}
.arrive-btn {
	position: fixed;
	bottom: 20rpx;
	width: 750rpx;
	text-align: center;
}
.sub-btn {
	background: none;
	padding: 0;
	margin: 0;
	border: none;
	animation: scaleUp 2.5s infinite;
	box-shadow: none;
	border-style: none;
	margin-top: 25rpx;
	min-height: 120rpx;

	border::after {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		content: none;
		border-style: none;
	}
}
</style>
